<script setup>
import { ref, onMounted } from 'vue'

const isMenuOpen = ref(false)
const isDarkMode = ref(false)

// 切换工具菜单
const toggleMenu = () => {
    isMenuOpen.value = !isMenuOpen.value
}

// 切换主题
const toggleTheme = () => {
    isDarkMode.value = !isDarkMode.value
    document.documentElement.classList.toggle('dark-mode')
    localStorage.setItem('theme', isDarkMode.value ? 'dark' : 'light')
}

// 回到顶部
const scrollToTop = () => {
    window.scrollTo({
        top: 0,
        behavior: 'smooth'
    })
    // 点击后关闭菜单
    isMenuOpen.value = false
}

// 初始化主题
onMounted(() => {
    const savedTheme = localStorage.getItem('theme')
    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches

    if (savedTheme === 'dark' || (!savedTheme && prefersDark)) {
        isDarkMode.value = true
        document.documentElement.classList.add('dark-mode')
    }
})

// 点击页面其他地方关闭工具菜单
const handleClickOutside = (event) => {
    if (!event.target.closest('.tools')) {
        isMenuOpen.value = false
    }
}

onMounted(() => {
    document.addEventListener('click', handleClickOutside)
})
</script>

<template>
    <div class="tools">
        <!-- 工具菜单 -->
        <transition name="tools-menu">
            <div v-if="isMenuOpen" class="tools-menu">
                <!-- 主题切换按钮 -->
                <div class="tool-item theme-toggle" @click="toggleTheme">
                    <span class="sun" v-if="!isDarkMode">☀️</span>
                    <span class="moon" v-else>🌙</span>
                </div>

                <!-- 回到顶部按钮 -->
                <div class="tool-item to-top" @click="scrollToTop">
                    ↑
                </div>
            </div>
        </transition>
        <div class="tools-toggle" :class="{ active: isMenuOpen }" @click="toggleMenu">
            <span class="toggle-icon">+</span>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.tools {
    position: fixed;
    bottom: 32px;
    right: 32px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;

    // 主开关按钮
    .tools-toggle {
        width: 50px;
        height: 50px;
        background: #1890ff;
        color: white;
        border-radius: 50%;
        text-align: center;
        line-height: 50px;
        font-size: 24px;
        cursor: pointer;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        transition: all 0.3s ease;
        z-index: 1001;
        display: flex;
        align-items: center;
        justify-content: center;

        &:hover {
            background: #40a9ff;
            transform: scale(1.05);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        }

        &.active {
            transform: rotate(45deg);
            background: #40a9ff;
        }

        .toggle-icon {
            transition: transform 0.3s ease;
        }
    }

    // 工具菜单
    .tools-menu {
        display: flex;
        flex-direction: column;
        gap: 12px;

        // 菜单入场动画
        &.tools-menu-enter-active,
        &.tools-menu-leave-active {
            transition: all 0.3s ease;
        }

        &.tools-menu-enter-from {
            transform: translateY(40px) scale(0.9);
            opacity: 0;
        }

        &.tools-menu-leave-to {
            transform: translateY(40px) scale(0);
            opacity: 0;
        }
    }

    // 工具项通用样式
    .tool-item {
        width: 50px;
        height: 50px;
        background: #ffffff;
        color: #333;
        border-radius: 50%;
        text-align: center;
        line-height: 50px;
        font-size: 20px;
        cursor: pointer;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #e0e0e0;
        position: relative;

        &:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
            background: #1890ff;
            color: white;
        }

        &:active {
            transform: translateY(0);
        }

        &:hover .tool-tip {
            opacity: 1;
            transform: translateX(0);
        }
    }

    // 主题切换按钮特殊样式
    .theme-toggle {

        .sun,
        .moon {
            transition: transform 0.3s ease;
        }

        &:hover .sun {
            transform: rotate(15deg);
        }

        &:hover .moon {
            transform: rotate(-15deg);
        }
    }

    // 回到顶部按钮特殊样式
    .to-top {
        font-weight: bold;

        &:hover {
            transform: translateY(-2px);
        }
    }
}

// 暗色模式支持
.dark-mode {
    .tool-item {
        background: #2d2d2d;
        color: #e0e0e0;
        border-color: #404040;

        &:hover {
            background: #1890ff;
            color: white;
        }
    }
}

// 响应式设计
@media (max-width: 768px) {
    .tools {
        bottom: 20px;
        right: 20px;

        .tools-toggle {
            width: 44px;
            height: 44px;
            line-height: 44px;
            font-size: 20px;
        }

        .tool-item {
            width: 44px;
            height: 44px;
            line-height: 44px;
            font-size: 18px;
        }
    }
}
</style>